<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:pou="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <ui:component>
        
        <pou:layout style="height: 500px">
           
            <pou:layoutUnit   position="center" header="Mi mapa" style="min-width: 600px" >


                <pou:gmap id="mapui"  center="#{miMapaController.centerMap}" zoom="15" 
                          type="ROADMAP" model="#{miMapaController.mapModel}"
                          style="min-width:600px;min-height:450px">  

                    <pou:ajax event="overlaySelect" listener="#{miMapaController.onMarkerSelect}" />  

                    <pou:gmapInfoWindow>  
                        <pou:outputPanel style="text-align:center;display:block;margin:auto:">  

                            <pou:gmapInfoWindow maxWidth="400">  
                                <pou:outputPanel style="text-align:center;display:block;margin:auto:">  

                                    <h:outputText value="#{miMapaController.marker.title}"
                                                  style="font-weight: bold"/>
                                    <br />
                                    <h:outputText value="#{miMapaController.marker.data.descripcionPoi}"/>
                                    <br />
                                    <h:commandLink value="#{miMapaController.marker.data.urlWebPoi}"/>
                                    
                                </pou:outputPanel>  
                                <pou:galleria value="#{miMapaController.marker.data.imagenList}" var="images">  
                                        <pou:graphicImage value="#{images.urlImagen}" />  
                                </pou:galleria>

                            </pou:gmapInfoWindow>  

                        </pou:outputPanel>  

                    </pou:gmapInfoWindow>  
                </pou:gmap>

            </pou:layoutUnit>
            
            <pou:layoutUnit position="west" size="200" header="Opciones" 
                            collapsible="true">    
                    <h:panelGrid columns="2" cellpadding="10px" style="margin-bottom:10px">                                            
                            <pou:selectBooleanCheckbox value="#{miMapaController.misPOIs}" />                 
                            <h:outputText value="Mis POIs" />
                                                  
                            <pou:selectBooleanCheckbox value="#{miMapaController.todosLosPOIs}"/>                                                    
                            <h:outputText value="POIs publicos"/>
                    </h:panelGrid>         
                    <h:panelGrid columns="1" cellpadding="10px" style="margin-bottom:10px"> 
                            <pou:commandButton value="Actualizar"  id="ajax" update="mapui" /> 
                            <pou:ajaxStatus id="loading">
                                <f:facet name="start">
                                    <h:graphicImage value="resources/img/loading_circle.gif" />  
                                </f:facet>
                                <f:facet name="complete">  
                                    <h:outputText value="" />  
                                </f:facet>  
                            </pou:ajaxStatus>
                    </h:panelGrid>    
            </pou:layoutUnit>
            
            
        </pou:layout>
       
    </ui:component>
</html>
